<template>
  <el-dialog v-model="visible" title="权限配置">
    <div>
      <el-form :inline="true" :model="props.row" :rules="rules" ref="formRef">
        <el-form-item label="权限类型">
          <el-radio-group v-model="props.row.rule_type">
            <el-radio v-for="(p, index) in ruleTypeRadioList" :key="index" :label="p.value">
              <template #default>
                {{ p.label }}
              </template>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="perms">
          <template #label>
            <FormLabel title="权限标识" tip="xxx:xxx:xxx形式(xxx必须为字母)"></FormLabel>
          </template>
          <el-input v-model="props.row.perms" placeholder="请填写权限标识"></el-input>
        </el-form-item>
        <el-form-item prop="name">
          <template #label>
            <FormLabel title="权限名称" tip="最多不超过20个字"></FormLabel>
          </template>
          <el-input placeholder="请输入权限标识" v-model="props.row.name"></el-input>
        </el-form-item>
        <span v-if="props.row.rule_type === 'menu'">
          <el-form-item prop="route_name">
            <template #label>
              <FormLabel title="路由名称" tip="最多不超过20个字"></FormLabel>
            </template>
            <el-input placeholder="请输入路由名称" v-model="props.row.route_name"></el-input>
          </el-form-item>
          <el-form-item prop="path">
            <template #label>
              <FormLabel title="路由路径" tip="/xxx/xxx格式"></FormLabel>
            </template>
            <el-input v-model="props.row.path" placeholder="请输入路由路径"></el-input>
          </el-form-item>
          <el-form-item label="是否重定向">
            <el-switch v-model="props.row.isRedirect" active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
          <el-form-item v-if="props.row.isRedirect" prop="redirect">
            <template #label>
              <FormLabel title="重定向" tip="/xxx/xxx格式"></FormLabel>
            </template>
            <el-input v-model="props.row.redirect" placeholder="请输入重定向路径"></el-input>
          </el-form-item>
          <el-form-item v-else prop="component">
            <template #label>
              <FormLabel title="组件" tip="/xxx/xxx/*(index)格式"></FormLabel>
            </template>
            <el-input v-model="props.row.component" placeholder="请输入组件路径"></el-input>
          </el-form-item>
          <el-form-item prop="title">
            <template #label>
              <FormLabel title="菜单标题" tip="1-20字之间"></FormLabel>
            </template>
            <el-input v-model="props.row.title" placeholder="请输入菜单标题"></el-input>
          </el-form-item>
          <el-form-item label="作为首页">
            <el-switch v-model="props.row.is_home" active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
          <el-form-item label="是否隐藏">
            <el-switch v-model="props.row.is_hide" active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
          <el-form-item label="固定导航栏">
            <el-switch v-model="props.row.is_affix" active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
          <el-form-item label="全屏">
            <el-switch v-model="props.row.is_full" active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
          <el-form-item label="是否缓存">
            <el-switch v-model="props.row.is_keep_alive" active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
          <el-form-item prop="is_link">
            <template #label>
              <FormLabel title="外部链接" tip="空字符串或者必须为https协议格式且长度不可超过300"></FormLabel>
            </template>
            <el-input v-model="props.row.is_link" placeholder="请输入外部链接"></el-input>
          </el-form-item>
        </span>
        <span v-else>
          <el-form-item prop="api_name">
            <template #label>
              <FormLabel title="接口名称" tip="1-20字之间"></FormLabel>
            </template>
            <el-input v-model="props.row.title" placeholder="请输入接口名称"></el-input>
          </el-form-item>
          <el-form-item label="请求类型">
            <el-select v-model="props.row.type">
              <el-option v-for="p in requestList" :key="p" :label="p" :value="p"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="req_path">
            <template #label>
              <FormLabel title="请求路径" tip="/xxx/xxx格式或者空(空字符串代表按钮权限)"></FormLabel>
            </template>
            <el-input v-model="props.row.req_path" placeholder="请输入请求路径"></el-input>
          </el-form-item>
        </span>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" @click="submit">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormProps } from "../interface/form";
import { RuleType, RequestType } from "@/interface/system/rule";
import { FormInstance, FormRules } from "element-plus";
import { CheckAll, Validate } from "@/utils/eleValidate";
import { initFormData } from "../data/index";
const props = ref<Tool.AcceptParams<FormProps>>({
  row: JSON.parse(JSON.stringify(initFormData))
});
const visible = ref(false);

const acceptParams = (params: Tool.AcceptParams<FormProps>) => {
  props.value = params;
  visible.value = true;
};

defineExpose({ acceptParams });

const formRef = ref<FormInstance>();
// 规则类型单选
const ruleTypeRadioList = reactive<{ label: string; value: RuleType }[]>([
  { label: "菜单", value: "menu" },
  { label: "api", value: "api" }
]);
// 请求类型
const requestList = reactive<RequestType[]>(["GET", "POST", "PUT", "DELETE", "BUTTON"]);

const rules: FormRules = {
  perms: [{ required: true, validator: CheckAll(Validate.perms, "权限标识格式错误"), trigger: "blur" }],
  name: [{ required: true, max: 20, min: 1, message: "字数1-20之间" }],
  route_name: [{ required: true, validator: CheckAll(Validate.name, "路由标识格式错误") }],
  path: [{ required: true, validator: CheckAll(Validate.route_path, "路径格式错误"), trigger: "blur" }],
  redirect: [{ required: true, validator: CheckAll(Validate.route_path, "重定向格式错误"), trigger: "blur" }],
  component: [{ required: true, validator: CheckAll(Validate.route_path, "组件路径格式错误"), trigger: "blur" }],
  title: [{ required: true, max: 20, min: 1, message: "字数1-20之间" }],
  is_link: [{ validator: CheckAll(Validate.https, "无效的https协议格式") }],
  req_path: [{ required: true, validator: CheckAll(Validate.route_path, "路径格式错误"), trigger: "blur" }]
};

const submit = () => {
  formRef.value?.validate(async v => {
    if (!v) return;
    console.log(props.value.row);
  });
};
</script>

<style></style>
